The Hover selector can be used on all elements

Because this is one single image, there will be no loading delay when a user hovers over the image

We only add three lines of code to add the hover effect:

#sprite a:hover{background: url('sprite.gif') 0 -45px;}

#bud a:hover{background: url(bud.gif') -47px -45px;}

#next a:hover{background: url('next.gif') -91px -45px;}

#Sprite a:hover{background: transparent url(sprite.gif) 0 -45px;}

all three hover images we specify the same background position, only 45px further down